<template>
  <div class="chart" :id="chartId"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { debounce } from "@/utils/util.js";

const myChart = ref(null);

const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  chartId: {
    type: String,
  },
  type: {
    type: String,
    default: "line",
  },
  options: {
    type: Object,
  },
});

watch(
  () => props.chartData,
  (newValue, oldValue) => {
    const option = {
      title: {
        text: newValue.name,
        left: "center",
      },
      xAxis: {
        type: "category",
        data: newValue.xData,
      },
      yAxis: {
        type: "value",
        name: "自相关系数",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      series: [
        // {
        //   data: newValue.yData,
        //   type: newValue.type || props.type,
        //   smooth: true, // 如果需要平滑曲线，可以设置为 true
        //   symbol: "none",
        // },
      ],
    };
    const is2Array = is2DArray(props.chartData.yData);
    if (is2Array) {
      props.chartData.yData.map((ele) => {
        option.series.push({
          data: ele,
          type: props.type,
          smooth: true, // 如果需要平滑曲线，可以设置为 true
          symbol: "none",
        });
      });
    } else {
      option.series = [
        {
          data: props.chartData.yData,
          type: props.type,
          smooth: true, // 如果需要平滑曲线，可以设置为 true
          symbol: "none",
        },
      ];
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.value.setOption(option);
  },
  {
    deep: true,
    // immediate: true
  }
);
const chartInit = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById(props.chartId));
  // 配置项
  const option = {
    type: "line",
    title: {
      text: props.chartData.name,
      left: "center",
    },
    xAxis: {
      type: "category",
      data: props.chartData.xData,
    },
    yAxis: {
      type: "value",
      name: "自相关系数",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    series: [
      // {
      //   data: props.chartData.yData,
      //   type: props.type,
      //   smooth: true, // 如果需要平滑曲线，可以设置为 true
      //   symbol: "none",
      // },
    ],
  };
  const is2Array = is2DArray(props.chartData.yData);
  if (is2Array) {
    props.chartData.yData.map((ele) => {
      option.series.push({
        data: ele,
        type: props.type,
        smooth: true, // 如果需要平滑曲线，可以设置为 true
        symbol: "none",
      });
    });
  } else {
    option.series = [
      {
        data: props.chartData.yData,
        type: props.type,
        smooth: true, // 如果需要平滑曲线，可以设置为 true
        symbol: "none",
      },
    ];
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.value.setOption(option);
  window.onresize = debounce(myChartResize, 500);
};
const is2DArray = (arr) => {
  if (!Array.isArray(arr)) {
    return false; // 不是数组
  }
  return arr.every((element) => Array.isArray(element));
};
const myChartResize = () => {
  if (!myChart.value) return;
  myChart.value.resize();
};
// Lifecycle hook
onMounted(() => {
  chartInit();
});
</script>
<style>
.chart {
  width: 100%;
  height: 100%;
}
</style>
